<template>

  <div class="clearfix">
    <div class="floor-img">
      <div v-if="banner.length > 0">
        <a :href="banner[0].path" v-if="banner[0].path">
          <img v-lazyload.cdn="banner[0].picturePath"/>
        </a>

        <a v-else>
          <img v-lazyload.cdn="banner[0].picturePath"/>
        </a>
      </div>

    </div>

    <div class="floor-goods">
      <table class="table">
        <thead>
        <tr>
          <th width="10%">品名</th>
          <th width="10%">品位</th>
          <th width="12%">产地</th>
          <th width="18%">交货地</th>
          <th width="12%">数量</th>
          <th width="12%">价格</th>
          <th width="15%">截止时间</th>
          <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item, index) in data" :key="item.goodsId" v-if="index<6">
          <td :title="item.goodsCate2Name">{{ item.goodsCate2Name }}</td>
          <td :title="`${item.goodsAttr.grade}`">{{ item.goodsAttr.grade }}</td>
          <td :title="item.goodsAttr.producingPlace">{{ item.goodsAttr.producingPlace }}</td>
          <td class="text-primay" :title="item.goodsAttr.deliveryPoint">{{ item.goodsAttr.deliveryPoint }}</td>
          <td :title="`${item.totalStock}${item.measure}`">{{ item.totalStock }}{{item.measure}}</td>
          <td class="text-primay">
            <span v-if="item.isPhonePrice === 1">电议</span>
            <span v-else :title="`${item.minPrice}/${item.measure}`">{{item.minPrice}}元/{{item.measure}}</span>
          </td>
          <td :title="item.goodsAttr.expireDate">{{ item.goodsAttr.expireDate }}</td>
          <td>
            <a :href="`${item.shopDomain}/kcDetails/${item.goodsId}`" target="_blank"
               class="el-button el-button--primary el-button--mini is-plain">查看</a>
          </td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      banner: {
        type: Array,
        'default' () {
          return []
        }
      },
      data: {
        type: Array,
        'default' () {
          return []
        }
      }
    },
    data () {
      return {}
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../element-variables.scss";
  @import "../../assets/scss/util.scss";

  .floor-img {
    float: left;
    height: 350px;
    width: 220px;
    border-right: 1px solid #dedede;
    overflow: hidden;

    a {
      display: block;
    }

    img {
      width: 220px;
      height: 350px;
    }
  }

  .floor-index {
    color: $--color-primary;
  }

  .floor-goods {
    width: 968px;
    float: left;

    tr {
      th {
        background-color: #f9f9f9;
        padding: 12px 10px;
        border-bottom: 1px solid #dedede;
      }
      td {
        padding: 0 10px;
        @extend .text-overflow;
      }
      td:first-child,
      th:first-child {
        padding-left: 20px;
      }
      td:last-child,
      th:last-child {
        padding-right: 20px;
      }
      &:hover {
        td {
          background-color: #f5f5f5;
        }
      }
    }

    td {
      height: 50px;
    }
  }
</style>
